<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import Form from '@/components/common/form.vue';
import { getModelList } from '@/service/api/modules/workwear/mold-maintenance';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  },
  operateType: {
    type: String,
    default: () => 'add'
  }
});

const moldNoList = ref([]);

const formList = [
  {
    type: 'tabs',
    name: '基本项目',
    span: 24
  },
  {
    type: 'select',
    key: 'moldIds',
    label: '模具型号',
    placeholder: '请输入模具型号',
    span: 8,
    rule: {
      required: true,
      message: '请输入模具型号',
      trigger: 'blur'
    },
    selectOptions: moldNoList,
    search: true,
    change(val) {
      model.value.moldId = moldNoList.value.find(item => item.value === val).moldUuid;
    }
  },

  {
    type: 'input',
    key: 'moldDesc',
    label: '问题点描述',
    placeholder: '请输入问题点描述',
    span: 8
  },

  {
    type: 'input',
    key: 'replacePart',
    label: '更换配件',
    placeholder: '请输入更换配件',
    span: 8
  },

  {
    span: 8,
    type: 'datePicker',
    key: 'upkeepDate',
    label: '日期',
    rule: {
      required: true,
      message: '请选择日期',
      trigger: 'change'
    },
    tansfromDisabled(operateType) {
      return operateType === 'look';
    }
  },

  {
    span: 8,
    type: 'datePicker',
    key: 'upkeepStartTime',
    label: '维修时间',
    rule: {
      required: true,
      message: '请选择维修时间',
      trigger: 'change'
    },
    tansfromDisabled(operateType) {
      return operateType === 'look';
    },
    showTime: true
  },

  {
    span: 8,
    type: 'datePicker',
    key: 'upkeepEndTime',
    label: '修复时间',
    rule: {
      required: true,
      message: '请选择修复时间',
      trigger: 'change'
    },
    tansfromDisabled(operateType) {
      return operateType === 'look';
    },
    showTime: true
  },

  {
    type: 'tabs',
    name: '人员信息',
    span: 24
  },
  {
    type: 'input',
    key: 'upkeeper',
    label: '操作人',
    placeholder: '请输入操作人',
    span: 8
  },

  {
    type: 'select',
    key: 'upkeepType',
    label: '类别',
    placeholder: '请选择类别',
    span: 8,
    selectOptions: [
      {
        value: 1,
        label: '维修'
      },
      {
        value: 2,
        label: '保养'
      }
    ]
  },

  {
    type: 'textarea',
    key: 'remark',
    label: '备注',
    placeholder: '请输入备注',
    span: 8,
    textareaRows: 1
  }
];

function getModel() {
  const obj = {};
  formList.forEach(item => {
    if (item.key && item.span) {
      if (props.operateType === 'add') {
        obj[item.key] = null;
      } else {
        obj[item.key] = props.rowData[item.key];
      }
    }
  });
  return obj;
}
const formRef = ref(null);

const model = ref({ ...getModel(), moldNo: null });

function getMoldNoList() {
  getModelList({
    pageNum: 1,
    pageSize: 9999
  }).then(({ data, error }) => {
    if (!error) {
      moldNoList.value = data.list.map(item => ({
        value: item.moldNo,
        label: item.moldNo,
        ...item
      }));

      nextTick(() => {
        if (props.operateType !== 'add') {
          model.value.moldIds = moldNoList.value.find(item => item.moldUuid === props.rowData.moldId).value;
          // model.value.moldNo = model.value.moldIds;
        }
      });
    }
  });
}

getMoldNoList();
function validateForm() {
  return formRef.value.validateForm();
}

defineExpose({
  model: model.value,
  validateForm
});
</script>

<template>
  <div class="event-form">
    <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
  </div>
</template>

<style lang="scss" scoped></style>
